<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020-9-5
  Time: 11:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>cityFlightThroughput</title>

    <!-- 引入jquery -->
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery-1.11.3.min.js"></script>
    <!-- 引入 ECharts -->
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/echarts.min.js"></script>
    <!--中国地图china-->
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/china.js"></script>
    <%--百度地图--%>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/bmap.js"></script>
    <%--百度地图API+密匙--%>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>
    <%--引入各大城市地图坐标--%>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/geoCoordMap.js"></script>

</head>
<body>


<div id="main" style="width: 800px;height:600px;"></div>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    //加载数据
    $.ajax({
        url: '<%=request.getContextPath()%>/city/loadCityFlightThroughput',  //加载后端数据
        type: 'POST',
        async: false,
        cache: false,
        dataType: 'json',
        success: function (data) {      //data得到后端传来的数据


            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].cityName];
                    if (geoCoord) {
                        res.push({
                            name: data[i].cityName,
                            value: geoCoord.concat(data[i].flightThroughput)
                        });
                    }
                }
                return res;
            };

            option = {
                title: {
                    text: '全国各城市航班吞吐量 ',
                    // subtext: 'data from PM25.in',
                    // sublink: 'http://www.pm25.in',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                bmap: {
                    center: [104.114129, 37.550339],
                    zoom: 5,
                    roam: true,
                    mapStyle: {
                        styleJson: [{
                            'featureType': 'water',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'land',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#f3f3f3'
                            }
                        }, {
                            'featureType': 'railway',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'highway',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#fdfdfd'
                            }
                        }, {
                            'featureType': 'highway',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'arterial',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#fefefe'
                            }
                        }, {
                            'featureType': 'arterial',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#fefefe'
                            }
                        }, {
                            'featureType': 'poi',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'green',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'subway',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'manmade',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'local',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'arterial',
                            'elementType': 'labels',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }, {
                            'featureType': 'boundary',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#fefefe'
                            }
                        }, {
                            'featureType': 'building',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#d1d1d1'
                            }
                        }, {
                            'featureType': 'label',
                            'elementType': 'labels.text.fill',
                            'stylers': {
                                'color': '#999999'
                            }
                        }]
                    }
                },
                series: [
                    {
                        name: 'pm2.5',
                        type: 'scatter',
                        coordinateSystem: 'bmap',
                        data: convertData(data),
                        symbolSize: function (val) {
                            // return val[2] / 10;
                            if (val[2] <= 100) return val[2] / 10;
                            else if (val[2] <= 1000) return 10 + (val[2] - 10) / 100;
                            else if (val[2] <= 10000) return 20 + (val[2] - 20) / 1000;
                            else if (val[2] <= 100000) return 30 + (val[2] - 30) / 10000;
                            else return 40 + (val[2] - 30) / 10000
                        },
                        encode: {
                            value: 2
                        },
                        label: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        itemStyle: {
                            color: 'purple'
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: convertData(data.sort(function (a, b) {
                            return b.flightThroughput - a.flightThroughput;
                        }).slice(0, 10)),       //排名前十显示光晕
                        symbolSize: function (val) {
                            if (val[2] <= 100) return val[2] / 10;
                            else if (val[2] <= 1000) return 10 + (val[2] - 10) / 100;
                            else if (val[2] <= 10000) return 20 + (val[2] - 20) / 1000;
                            else if (val[2] <= 100000) return 30 + (val[2] - 30) / 10000;
                            else return 40 + (val[2] - 30) / 10000
                        },
                        encode: {
                            value: 2
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        },
                        itemStyle: {
                            color: 'purple',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        },
                        zlevel: 1
                    }
                ]
            };
            myChart.setOption(option);
        }
    });
</script>

</body>
</html>
